<%@page import="com.xbk.platform.sql.ConnectionMananger"%>
<%@page import="java.util.List"%>
<%@page import="com.xbk.jtable.ui.HtmlUtil"%>
<%@page import="com.xbk.jtable.ui.jForm"%>
<%@page import="com.xbk.jtable.ui.jTableUtil"%>
<%@page import="com.xbk.platform.DataMap"%>
<%@page import="com.xbk.util.StringUtil"%>
<%@page import="com.xbk.jtable.ui.Widget"%>
<%@page import="com.xbk.jtable.ui.jTable"%>
<%@page import="com.xbk.platform.DaoUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/Include/include.jspf"%>
<%
	DaoUtil du = ConnectionMananger.getDaoUtil();
	String sCodeNo = request.getParameter("CodeNo");
%>
<style type="text/css">
ul{margin: 0}
li{font-family: 微软雅黑;font-size:12px;list-style: none;}
code{font-family:"Courier New";padding:0 5px;}
div{padding:5px;font-size: 14px;margin-bottom: 5px;line-height: 25px;}
.desc{background: #95B3D7;}
.desc1 {color: #404040;background: #F0F0F0;}
.desc2{background: #95B3D7;}
.desc,.desc2,.program{color: white;}
div.program {background: #4F81BD;margin-bottom: 5px;}
.program > span{margin-right: 50px;}
.apiItem {background: white;}
#apiContainer{clear: both;margin: 150px;margin-top: 50px}
.driven{border-bottom: 1px #999 dashed;margin-bottom: 20px;}
h2{cursor: pointer;}
table{background: white;}
.mb0{margin-bottom: 0px;}
.radius{border-radius:4px;padding: 0px;border: 1px solid #ccc;}
.radius > div{margin-bottom: 0px;}
</style>
</head>
<body>
<div class="container stay-center">
	<h1>jTable脚本API<br><small>版本:V 1.0 2013年8月20日16:28:12</small></h1>
	<button class="btn" id="viewDemo"><i class="icon-share"></i> 看一个完整示例</button>
	<button class="btn" id="hideDetail"><i class="icon-warning-sign"></i> 显示 / 隐藏详情</button>
	<a class="btn btn-warning" id="hideDetail" href="ShowApi.jsp"><i class="icon-home icon-white"></i> 返回列表</a>
	<div id="jtableContainer" style="margin: 0px;margin-top: 10px;display: none;"></div>
</div>
<div class="container hide" id="demo">
	<h2>完整示例</h2>
	<div>
		<h4>1. Java代码部分</h4>
		<pre>
		<code>
			&lt;%
				DaoUtil du = ConnectionMananger.getDaoUtil();<span class='text-success'>//数据操作对象</span>
				String sInterfaceID = request.getParameter("interfaceID");
				String jtableData = "";
				String sSql = <span class="text-info">"SELECT * FROM USER_INFO"</span>;
				
				jTable jtable = <span class="text-error">new</span> jTable(du);
				jtable.setKeyCols(<span class="text-info">"USERID"</span>);
				jtable.setRelativeTable(<span class="text-info">"USER_INFO"</span>);
				jtable.initBySql(sSql);
				jtable.setHeader(du.getCols(sSql));
				jtableData = jtable.getHtml();
				
				<span class='text-error'>du.close();</span><span class='text-success'>//一定要记得关闭数据操作对象</span>
			%>
		</code>
		</pre>
		<h4>2. JavaScript代码部分</h4>
		<pre>
		<code>
			$(<span class="text-error">function</span>(){
				<span class="text-error">var</span> jtable = new jDcp.web.Table();
				jtable.parse(<span class="text-info">"&lt;%=jtableData %>"</span>);
				jtable.appendTo(<span class="text-info">"jtableContainer"</span>);
				
				jtable.hideModelRow(<span class="text-info">"当前接口文件没有任何规则被指定！"</span>);
				
				<span class="text-error">var</span> button = {};
				button.text = <span class="text-info">"规则校验"</span>;
				button.title = <span class="text-info">"默认校验当期数据"</span>;
				button.cls = <span class="text-info">"btn"</span>;
				button.fn = function(){
					<span class="text-error">var</span> rules = jtable.getColValues("RULEID");
					<span class="text-error">var</span> interfaceID = $(<span class="text-info">"#interfaceID"</span>).val();
					window.open(<span class="text-info">"RuleCheckResult.jsp</span>,<span class="text-info">"newwindow"</span>,'height=700,width=1360,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
				};
				button.img = <span class="text-info">"icon-check"</span>;
				jtable.addButton(button);
				
				viewData = {};
				viewData.text = <span class="text-info">"查看当期数据"</span>;
				viewData.cls = <span class="text-info">"btn btn-primary"</span>;
				viewData.fn = function(){
					window.open(<span class="text-info">"ViewData.jsp?rand="+Util.getRandom()</span>,<span class="text-info">"newwindow"</span>,'height=700,width=1360,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
				};
				viewData.img = <span class="text-info">"icon-search icon-white"</span>;
				jtable.addButton(viewData);
				
				jtable.hideCols({col:<span class="text-info">"INTERFACEID"</span>});
				$(<span class="text-info">".jtable-container"</span>).css(<span class="text-info">"height"</span>,(($(window).height() - $(<span class="text-info">".jtable-container"</span>).offset().top) - 25) + "px");
				
				<span class='text-success'>//隐藏字段</span>
				jtable.hideCols({col:<span class="text-info">"RULEID,OBJECTNO"</span>});
				
				<span class='text-success'>//隐藏按钮</span>
				jtable.hideButton(jDcp.web.Table.BUTTON_ADD);
				jtable.hideButton(jDcp.web.Table.BUTTON_DELETE);
				jtable.hideButton(jDcp.web.Table.BUTTON_SAVE);
				
				<span class='text-success'>//禁止编辑jTable</span>
				jtable.setEdit(false);
				
				<span class='text-success'>//插入自定义的字段</span>
				jtable.insertCol(<span class="text-info">"&lt;td class='stay-center'>&lt;input type='checkbox'>&lt;/input>&lt;/td>"</span>,<span class="text-info">"是否选用"</span>,1);
				
				$(<span class="text-info">"#interfaceID"</span>).change(function(){
					<span class="text-error">var</span> interfaceID = $(this).val();
					window.location.replace(<span class="text-info">"RuleCheck.jsp?interfaceID="+interfaceID+"&rand="+Util.getRandom()</span>);
				});
			});
		</code>
		</pre>
	</div>
</div>
<div id="apiContainer">
	<ul>
		<%
			String sHtmlTemplate = " <li class='apiItem'> "+
		
									" 	<h2>#FN_NAME#<small> #DESC#</small></h2> "+
									" 	<div class='program behide'> "+
									" 		<span> 语法：jtable.#FN_NAME#(#FNINPUT#); </span>  "+
									" 		<span> 返回值: #RETURN# </span> "+
									" 		<span> 分类: <span class='red'>#FNTYPE#</span> </span> "+
									" 		<span> 版本: #FNVERSION# </span> "+
									" 		<span> 作者: #FNAUTHOR# </span> "+
									"   </div>" +
									
									"   <div class='radius behide'> " +
									" 	    <div class='desc2 mb0'>参数：#FNINPUT#</div> "+
									" 	    <div class='desc1'> "+
									" 		    <h4>参数说明</h4> "+
									" 		    #FNINPUTDESC# "+
									" 	    </div> "+
									" 	</div> "+
									
									"   <div class='radius behide'> " +
									" 	    <div class='desc mb0'>说明</div> "+
									" 	    <div class='desc1'> "+
									" 		    #FNINFO# "+
									" 	    </div> "+
									"   </div> "+
									
									" 	<div class='driven'></div> "+
									" </li> ";
			String sSql = "SELECT * FROM DCP_API API WHERE API.OBJECTID = 'jTable' ORDER BY FNTYPE,FNNAME";
			List<DataMap> lData = du.getResults(sSql);
			for(DataMap data :lData){
				String li = sHtmlTemplate;
				li = li.replaceAll("#FN_NAME#", ("N".equalsIgnoreCase(data.getString("FNISUSE"))) ? 
												 "<del class='red' title='此方法以过时，由于问题'>" + data.getString("FNNAME") + "</del>" :
												 data.getString("FNNAME")
								  )
					   .replaceAll("#DESC#", data.getString("FNDESC"))
					   .replaceAll("#RETURN#", data.getString("FNRETURN"))
					   .replaceAll("#FNTYPE#", data.getString("FNTYPE"))
					   .replaceAll("#FNVERSION#", data.getString("FNVERSION"))
					   .replaceAll("#FNAUTHOR#", data.getString("FNAUTHOR"))
					   .replaceAll("#FNINFO#", data.getString("FNINFO"))
					   .replaceAll("#FNINPUT#", data.getString("FNINPUT"))
					   .replaceAll("#FNINPUTDESC#", data.getString("FNINPUTDESC"))
					   ;
				out.write(li);
			}
			du.close();
		%>
	</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
	$("#hideDetail").click(function(){
		$(".behide").toggle();
	});
	
	$("#viewDemo").click(function(){
		$("#demo").toggle();
	});
	
	$("h2").click(function(){
		$(this).parent().find(".behide").toggle();
	});
});
</script>
</html>